@import "iconfont";
@function r($px) {
    @return $px/40*1rem;
}

* {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}

.indexweb {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .heard {
        width: 100%;
        .heardone {
            padding: r(20);
            position: relative;
            width: 100%;
            border-bottom: solid 1px #d9d9d9;
            background: #b20000;
            .heardone1 {
                position: relative;
                height: r(42);
                width: 100%;
                .iconfont{
                    display: inline-block;
                    font-size: r(35);
                    color: white;
                }
                .one3 {
                    width: 41.4%;
                    height: r(42);
                    position: absolute;
                    top: 0%;
                    left: 28%;
                    img {
                        width: 100%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                .iconfont {
                    top: 0;
                    left: r(0);
                    height: r(42);
                }
                .one2 {
                    position: absolute;
                    top: 0;
                    right: r(0);
                    width: r(42);
                    height: r(42);
                    border-radius: 50%;
                    border: solid 2px white;
                    img {
                        width: r(26);
                        height: r(22);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }
        .heardtwo {
            position: relative;
            width: 100%;
            height: r(50);
            background: yellow;
            border-top: solid 1px #d9d9d9;
            border-left: solid 1px #d9d9d9;
            img {
                position: absolute;
                top: -999px;
                left: -999px;
                right: -999px;
                bottom: -999px;
                width: 100%;
                height: 100%;
                margin: auto;
            }
        }
    }
    .lunbo {
        height: r(306);
        position: relative;
        width: 100%;
        .carousel-indicators li{
            width: r(12);
            height: r(12);
            margin: 0;
        }
        
        .lunbOone {
            overflow: hidden;
            width: 100%;
            height: r(104);
            background: rgba(0, 0, 0, 0.4);
            position: absolute;
            bottom: 0;
            left: 0;
            p {
                height: r(53);
                padding: 0;
                margin: 0;
                text-align: center;
                line-height: r(70);
                font-size: r(27);
                color: white;
            }
            .one1 {
                margin-top: r(10);
                float: left;
                font-size: r(25);
                color: white;
            }
                .one{
                    margin-top: r(13);
                    float: left;
                    width: r(38);
                    height: r(28);
                    position: relative;
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            .two {
                position: relative;
                margin-top: r(12);
                float: left;
                margin-left: r(30);
                width: r(38);
                height: r(28);
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            .thir {
                margin-top: r(10);
                padding-left: r(20);
                float: left;
                font-size: r(25);
                color: white;
            }
            .four {
                margin-top: r(10);
                padding-right: r(10);
                padding-left: r(20);
                float: right;
                font-size: r(25);
                color: white;
            }
        }
    }
    .cjk {
        margin-top: r(40);
        width: 100%;
        height: r(406);
        .cjkone {
            border-bottom: solid 1px #e2e2e2;
            margin: 0 auto;
            width: 95%;
            height: r(180);
            .one1 {
                float: left;
                width: 59%;
                height: 100%;
                p {
                    margin: 0;
                    font-family: "微软雅黑";
                    font-size: r(26);
                }
                .o1 {
                    padding-top: r(10);
                    width: 100%;
                    height: r(52);
                    list-style: none;
                    .one1 {
                        width: r(18);
                        float: left;
                        font-size: r(23);
                        color: #c5c5c5;
                        line-height: r(50);
                    }
                    .one {
                        width: r(55);
                        height: r(27);
                        float: left;
                    }
                    .one2 {
                        line-height: r(50);
                        float: right;
                        font-size: r(23);
                        color: #c5c5c5;
                    }
                }
            }
            .two1 {
                overflow: hidden;
                position: relative;
                float: right;
                width: 38%;
                height: r(150);
                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: -999px;
                    left: -999px;
                    bottom: -999px;
                    right: -999px;
                    margin: auto;
                }
            }
        }
        .cjkone1 {
            padding-top: r(40);
            margin: 0 auto;
            width: 95%;
            height: r(180);
            .one1 {
                float: left;
                width: 59%;
                height: 100%;
                p {
                    margin: 0;
                    font-family: "微软雅黑";
                    font-size: r(26);
                }
                .o1 {
                    padding-top: r(10);
                    width: 100%;
                    height: r(52);
                    list-style: none;
                    .one1 {
                        width: r(18);
                        float: left;
                        font-size: r(23);
                        color: #c5c5c5;
                        line-height: r(50);
                    }
                    .one {
                        width: r(55);
                        height: r(27);
                        float: left;
                    }
                    .one2 {
                        line-height: r(50);
                        float: right;
                        font-size: r(23);
                        color: #c5c5c5;
                    }
                }
            }
            .two1 {
                overflow: hidden;
                position: relative;
                float: right;
                width: 38%;
                height: r(150);
                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: -999px;
                    left: -999px;
                    bottom: -999px;
                    right: -999px;
                    margin: auto;
                }
            }
        }
    }
    .cls {
        margin-top: r(10);
        width: 100%;
        .clsone {
            position: relative;
            margin: 0 auto;
            width: 95%;
            height: r(230);
            p {
                margin: 0;
                font-family: "微软雅黑";
                font-size: r(28);
            }
            .one {
                overflow: hidden;
                margin-top: r(20);
                width: 100%;
                height: r(125);
                .one1 {
                    float: left;
                    position: relative;
                    width: r(185);
                    height: 100%;
                    border: solid 1px #bebec0;
                    img {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                }
                .one2 {
                    margin-left: r(25);
                    float: left;
                    position: relative;
                    width: r(185);
                    height: 100%;
                   border: solid 1px #bebec0;
                    img {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                }
            }
            .clstwo {
                overflow: hidden;
                width: 100%;
                height: r(35);
                position: absolute;
                left: 0;
                bottom: 0;
                .two1 {
                    position: relative;
                    overflow: hidden;
                    float: left;
                    width: r(33);
                    height: r(33);
                    border-radius: 50%;
                    img {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                }
                .two2 {
                    padding-left: r(6);
                    float: left;
                    font-size: r(12);
                    color: #c5c5c5;
                }
                .two3 {
                    margin-top: r(-5);
                    margin-left: r(10);
                    position: relative;
                    overflow: hidden;
                    float: left;
                    width: r(33);
                    height: r(33);
                    border-radius: 50%;
                    img {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                }
                .two4 {
                    padding-left: r(6);
                    float: left;
                    font-size: r(12);
                    color: #c5c5c5;
                }
                .two5 {
                    padding-left: r(6);
                    float: right;
                    font-size: r(12);
                    color: #c5c5c5;
                }
            }
        }
    }
    .gengd {
        margin-top: r(20);
        width: 100%;
        text-align: center;
        font-size: r(27);
        color: #cecece;
        padding-bottom: r(120);
    }
    .dibu {
        background: white;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: r(111);
        border-top: solid 1px #bbb9ba;
        .dibuone {
            width: 95%;
            height: r(98);
            margin: 0 auto;
            .one {
                position: relative;
                width: r(78);
                height: r(98);
                text-align: center;
                .one1 {
                    overflow: hidden;
                    position: relative;
                    margin-left: r(10);
                    width: r(60);
                    height: r(66);
                    img {
                        width: 80%;
                        height: 75%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                span {
                        font-size: r(23);
                        text-align: center;
                        color: #B60005;
                    }
            }
            .two {
                position: absolute;
                top: 0;
                left: r(150);
                width: r(78);
                height: r(98);
                text-align: center;
                .one1 {
                    overflow: hidden;
                    position: relative;
                    margin-left: r(10);
                    width: r(60);
                    height: r(66);
                    color: #8b8b8b;
                    img {
                        width: 80%;
                        height: 80%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                    
                }
                span {
                        font-size: r(23);
                        color: #8b8b8b;
                        text-align: center;
                    }
            }
            .thir {
                position: absolute;
                top: 0;
                left: r(280);
                width: r(78);
                height: r(98);
                text-align: center;
                color: #8b8b8b;
                .one1 {
                    overflow: hidden;
                    position: relative;
                    margin-left: r(10);
                    width: r(60);
                    height: r(66);
                    color: #8b8b8b;
                    img {
                       width: 80%;
                        height: 80%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                    
                }
                span {
                        font-size: r(23);
                        color: #8b8b8b;
                        text-align: center;
                    }
            }
            .four {
                position: absolute;
                top: 0;
                right: r(150);
                width: r(78);
                height: r(98);
                text-align: center;
                color: #8b8b8b;
                .one1 {
                    overflow: hidden;
                    position: relative;
                    margin-left: r(10);
                    width: r(60);
                    height: r(66);
                    img {
                        width: 80%;
                        height: 80%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                    
                }
                span {
                        font-size: r(23);
                        color: #8b8b8b;
                        text-align: center;
                    }
            }
            .five {
                position: absolute;
                top: 0;
                right: r(20);
                width: r(78);
                height: r(98);
                text-align: center;
                color: #8b8b8b;
                .one1 {
                    overflow: hidden;
                    position: relative;
                    margin-left: r(10);
                    width: r(70);
                    height: r(66);
                    img {
                        width: 80%;
                        height: 75%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        bottom: -999px;
                        right: -999px;
                        margin: auto;
                    }
                    
                }
                span {
                        font-size: r(23);
                        color: #8b8b8b;
                        text-align: center;
                    }
            }
        }
    }
}

.caidan_box {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: #222222;
        z-index: 16;
    & input[type="checkbox"]:checked~.sosu {
        left: 0;
    }
    input{
        display: none;
    }
    .sosu {
        overflow: hidden;
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #222222;
        z-index: 16;
        transition: all 1s;
        .one {
            overflow: hidden;
            margin: 0 auto;
            padding-top: r(25);
            width: 95%;
            height: r(90);
            .one1 {
                overflow: hidden;
                position: relative;
                float: left;
                margin-top: r(5);
                width: r(50);
                height: r(50);
                background: red;
                border-radius: 50%;
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: auto;
                }
            }
            .one2 {
                overflow: hidden;
                width: r(530);
                height: r(55);
                float: right;
                position: relative;
                border-radius: 15px;
                border: solid 0.5px white;
                input {
                    padding-left: r(200);
                    float: right;
                    overflow: hidden;
                    color: white;
                    background: none;
                    display: block;
                    width: r(530);
                    height: r(54);
                    border-radius: 15px;
                    border: solid 0.5px;
                    border-left: none;
                }
            }
            .one3 {
                position: relative;
                top: r(3);
                left: r(20);
                width: r(60);
                height: r(55);
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: auto;
                }
            }
            .one4 {
                width: r(90);
                height: r(35);
                position: absolute;
                top: r(10);
                left: r(85);
                color: #7e7e7e;
                border-right: solid 1px #7e7e7e;
            }
        }
        .two {
            overflow: hidden;
            position: absolute;
            top: r(110);
            left: 40%;
            width: r(135);
            height: r(130);
            border-radius: 50%;
            img {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                margin: auto;
            }
        }
        .thir {
            width: r(210);
            height: r(26);
            position: absolute;
            top: r(260);
            left: 38%;
            p {
                font-size: r(30);
                float: left;
                color: #f5f5f5;
            }
            div {
                margin-top: r(6);
                float: right;
                font-size: r(23);
                width: r(108);
                height: r(31.5);
                color: #f5f5f5;
                border: solid 1px #f5f5f5;
                ;
            }
        }
        .four {
            overflow: hidden;
            width: r(150);
            height: r(33);
            position: absolute;
            top: r(305);
            left: 41%;
            .four1 {
                margin-left: r(10);
                float: left;
                position: relative;
                width: r(25);
                height: r(25);
                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: auto;
                }
            }
        }
          .five {
            overflow: hidden;
            width: r(195);
            height: r(28);
            position: absolute;
            top: r(336);
            left: 38%;
            .five1 {
                width: r(195);
                height: r(28);
                font-size: r(23);
                p {
                    color: white;
                    margin-left: r(5);
                    float: left;
                }
                span {
                    margin-left: r(5);
                    float: left;
                    color: red;
                }
                span:last-child {
                    float: right;
                }
                .five2 {
                    margin-top: r(1);
                    margin-left: r(5);
                    float: left;
                    width: r(3);
                    height: r(30);
                    background: #a2a2a2;
                }
            }
        }
         .six {
            overflow: hidden;
            width: r(465);
            height: r(55);
            position: absolute;
            top: r(380);
            left: 15%;
            .six1 {
                text-align: center;
                line-height: r(52);
                float: left;
                width: r(219);
                height: r(52);
                border-radius: 15px;
                background: #b60005;
                color: white;
            }
            .six2 {
                text-align: center;
                line-height: r(52);
                float: right;
                width: r(219);
                height: r(52);
                border-radius: 15px;
                background: #cdcdcd;
                color: white;
            }
        }
        .f1{
             margin: 0 auto;
             position: absolute;
             top: r(260);
             left: 42%;
             width: r(150);
             font-size: r(30);
             color: white;
         }
         .f2{
             margin: 0 auto;
             position: absolute;
             top: r(305);
             left: 43%;
             width: r(110);
             font-size: r(25);
             color: #555354;
         }
        
        .thve {
            width: 94%;
            position: absolute;
            top: r(440);
            left: 3%;
            .xialak{
                overflow: hidden;
                & input[type="checkbox"]:checked~.thveone {
        height: r(180);
    }
            .thveone {
                overflow: hidden;
                width: 100%;
                height: r(66);
                ul {
                    list-style: none;
                    width: 100%;
                    input[type="checkbox"] {
                        display: block;
                        width: 1000%;
                        height: 0;
                    }
                    label {
                        border-bottom: solid 1px #313131;
                    }
                    .thve1 {
                        width: r(600);
                        height: r(50);
                        .thve2 {
                            font-size: r(25);
                            color: #656565;
                            float: left;
                        }
                        .thve3 {
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                    }
                    .thve4 {
                        font-size: r(23);
                        margin: 0;
                        padding: 0;
                        width: 100%;
                        list-style: none;
                        ul {
                            margin-top: r(-40);
                            margin-bottom: 0;
                            li {
                                font-size: r(23);
                                margin: 0 auto;
                                margin-top: r(40);
                                text-align: center;
                                width: r(500);
                                height: r(53);
                                color: white;
                                border-bottom: solid 1px #313131;
                            }
                            li:last-child{
                                font-size: r(23);
                                line-height: r(50);
                                margin: 0 auto;
                                text-align: center;
                            }
                        }
                    }
                }
            }
            }
            .xialak1{
                margin-top: r(10);
                overflow: hidden;
                & input[type="checkbox"]:checked~.thveone1 {
        height: r(180);
    }
            .thveone1 {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: r(66);
                ul {
                    list-style: none;
                    width: 100%;
                    input[type="checkbox"] {
                        display: block;
                        width: 1000%;
                        height: 0;
                    }
                    label {
                        border-bottom: solid 1px #313131;
                    }
                    .thve1 {
                        width: r(600);
                        height: r(50);
                        .thve2 {
                            font-size: r(25);
                            color: #656565;
                            float: left;
                        }
                        .thve3 {
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                    }
                    .thve4 {
                        margin: 0;
                        padding: 0;
                        width: 100%;
                        list-style: none;
                        ul {
                            margin-top: r(-40);
                            li {
                                font-size: r(23);
                                margin: 0 auto;
                                margin-top: r(40);
                                text-align: center;
                                width: r(500);
                                height: r(53);
                                color: white;
                                border-bottom: solid 1px #313131;
                            }
                            li:last-child{
                                line-height: r(50);
                                margin: 0 auto;
                                text-align: center;
                            }
                        }
                    }
                }
            }
            }
            .eigt{
                margin: 0 auto;
                border-radius: 15px;
                color: white;
                text-align: center;
                line-height: r(51);
                margin-top: r(20);
                width: r(178);
                height: r(51);
                background: #b60005;
        }
        }
        
    }
}
.input_{
    visibility: hidden;
    width: 0;
    height: 0;
}
 .input_[type="checkbox"]:checked ~ .sosu_box {
         transform: translateX(0);
    }
.sosu_box{
    transition: all 1s;
    transform: translateX(100%);
        overflow: hidden;
        position: fixed; 
        z-index: 10000;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(100,100,100,.5);
        z-index: 16;

    .sosubox{
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: #222222;
        z-index: 16;
        transition: all 1s;
        input {
            display: none;
        }
        .one {
            overflow: hidden;
            margin: 0 auto;
            padding-top: r(25);
            width: 95%;
            height: r(90);
            .one1 {
                overflow: hidden;
                position: relative;
                float: left;
                margin-top: r(5);
                width: r(50);
                height: r(50);
                background: red;
                border-radius: 50%;
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: auto;
                }
            }
            .one2 {
                overflow: hidden;
                width: r(530);
                height: r(55);
                float: right;
                position: relative;
                border-radius: 15px;
                border: solid 0.5px white;
                input {
                    padding-left: r(200);
                    float: right;
                    overflow: hidden;
                    color: white;
                    background: none;
                    display: block;
                    width: r(530);
                    height: r(54);
                    border-radius: 15px;
                    border: solid 0.5px;
                    border-left: none;
                }
            }
            .one3 {
                position: relative;
                top: r(3);
                left: r(20);
                width: r(60);
                height: r(55);
                img {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin: auto;
                }
            }
            .one4 {
                width: r(90);
                height: r(35);
                position: absolute;
                top: r(10);
                left: r(85);
                color: #7e7e7e;
                border-right: solid 1px #7e7e7e;
            }
        }
        .two{
            position: relative;
            width: 100%;
            height: 100%;
            background: #f1f1f1;
            .twoone{
                position: relative;
                height: 100%;
                width: 96%;
                margin: 0 auto;
                .t1{
                    padding-top: r(21);
                }
                .twotwo{
                    position: relative;
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    .t2{
                        width: r(151);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                    .t3{
                        margin-left: r(15);
                        width: r(171);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                    .t4{
                        margin-left: r(15);
                        width: r(200);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                    .t5{
                        margin: 0;
                        margin-top: r(10);
                        width: r(117);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                    .t6{
                        margin: 0;
                        margin-left: r(15);
                        margin-top: r(10);
                        width: r(117);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                    .t7{
                        margin: 0;
                        margin-left: r(15);
                        margin-top: r(10);
                        width: r(320);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                    .t8{
                        margin: 0;
                        margin-top: r(10);
                        width: r(94);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                    .t9{
                        margin: 0;
                        margin-left: r(15);
                        margin-top: r(10);
                        width: r(251);
                        height: r(57);
                        text-align: center;
                        line-height: r(57);
                        color: #8b8b8b;
                        border: solid 1px #eaeaea;
                    }
                }
                
            }
            .twothir{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: r(431);
                    img{
                        width: 100%;
                        position: absolute;
                        top: -999px;
                        left: -999px;
                        right: -999px;
                        bottom: -999px;
                        margin: auto;
                    }
                }
        }
    }
}